<template>
    <div class="mb-4">
        <div class="flex flex-row justify-between items-center" @click="open = !open">
            <span class="text-xs font-medium">{{ props.options.name }}</span>
            <n-icon :class="{ 'rotate-180': !open }" class="transition ease-in-out" size="12" :component="CaretDown" />
        </div>
        <div class="grid grid-cols-3 justify-around gap-2 transition ease-in-out overflow-hidden pt-2"
            :class="{ 'h-0': !open }">
            <ItemOption v-for="option in props.options.children" :option="option">
            </ItemOption>
        </div>
    </div>
</template>


<script setup>
import { NIcon } from 'naive-ui';
import { ref, defineProps } from 'vue'
import { CaretDown } from '@vicons/ionicons5'
import ItemOption from './itemOption.vue'

const open = ref(true)

const props = defineProps({
    options: Object,
})

</script>